//用户自定义爬取
<template>
        <div class="common-layout">
            <el-container>
            <el-header style="margin-left: 0%; width: 200px;">
                <div>自定义任务列表</div>
                <el-button @click="customTask()">新建自定义任务</el-button>
            </el-header>
            <el-main>
              <div v-for="(item, index) in items" style="margin-top: 20px; height: 20%;" :key="index">
              <Listvue :item="item" :options="options" :index="index" @deletS="taskDelete" :submitUrl="submitUrl"></Listvue>
            </div>

            </el-main>
            </el-container>
            <UserDiag
            v-if="showUserDiag" ref="UserDiag" :dialog-title="UserDiagTitle" :item-info="tableItem" @closeDialog="closeDialog"
            >
            </UserDiag>
        </div>



</template>


<script>
import Listvue from '../../components/DIYList.vue';
import UserDiag from '@/components/UserDiag.vue';



export default{
    data () {
    return {
      userID:1,
      showUserDiag: false,
      UserDiagTitle: "",
      tableItem: {
        id: "",
      },
      items: [],
        options:{
          optionsRenew:[
          {
            value: 'Option1',
            label: '全量模式',
          },
          {
            value: 'Option2',
            label: '增量模式',
          },

          ],
      
          optionsPriority:[{
            value: 'Option1',
            label: '低',
          },
          {
            value: 'Option2',
            label: '中',
          },
          {
            value: 'Option3',
            label: '高',
          }]
        },
    }
  },
  methods:{
    createSplider(){
      
    },
    checkLog(){
      console.log("查看更新日志")
    },
    customTask(){
      this.tableItem = {
        id: "",
        date: "",
        name: "",
      };
      this.UserDiagTitle = "新增爬虫任务";
      this.showUserDiag = true;
      this.$nextTick(() => {
        this.$refs["UserDiag"].showUserDiag = true;
      });
      console.log(this.$refs["UserDiag"]);
    },
    taskDelete(index){  //通过操作下表操作数组不能做到响应式 那么只能通过后端请求数据刷新页面 在下面用axios再调用一次接口即可
      console.log('执行删除第',index,'个文件');
      for(var i=index;i<this.items.length;i++){
        console.log("长度",this.items.length);
        this.items[i]=this.items[i+1]
        
      }
      this.items.pop()

  },
  async get(url) {  //async  await  是解决异步的一种方案，必须要加，但是原生封装就不用
      this.$axios.get(url, {
            params: {
                userID: 1
            }
        }).then((res) => {
            console.log(res.data);
            this.items=res.data["data"]
        })

    }
  },
  beforeMount() {
    this.get('/api/specificCrawling/getTasks')},
  components:{
        Listvue,
        UserDiag
    }

   }
</script>

